import { deleteContacts, listContacts } from '@/services/api/contacts';
import { convertPageData } from '@/utils/request';
import { openConfirm } from '@/utils/ui';
import { PlusOutlined, DeleteOutlined,EditOutlined } from '@ant-design/icons';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button } from 'antd';
import InputDialog from './InputDialog';
import {staContactsProvince} from '@/services/api/contacts';
import { ProCard } from '@ant-design/pro-components';
import { useEffect, useRef, useState } from 'react';
import ReactECharts from 'echarts-for-react';


export default () => {
  const refAction = useRef<ActionType>(null);
  const [selectedRowKeys, selectRow] = useState<number[]>([]);
  const [contact, setcontact] = useState<API.ContactsVO>();
  const [visible, setVisible] = useState(false);
  const [currentPage, setCurrentPage] = useState(1); // 增加一个状态，用于保存当前页码
  const columns: ProColumns<API.ContactsVO>[] = [
    {
      title: '联系人ID',
      dataIndex: 'id',
      width: 100,
      search: false,
    },
    {
      title: '联系人名称',
      dataIndex: 'contactsName',
      width: 100,
    },
    {
      title: '性别',
      dataIndex: 'gender',
      width: 100,
      search: false,
    },
    {
      title: '部门名称',
      dataIndex: 'departmentName',
      width: 100,
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      width: 150,
    },
    {
      title: '联系电话',
      dataIndex: 'contactPhone',
      width: 100,
    },
    {
      title: '省份',
      dataIndex: 'province',
      width: 100,
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      width: 150,
      search: false,
    },
    {
      title: '操作',
      width: 100,
      render: (_, record) => [
        <a
          key="editable"
          onClick={() => {
            setcontact(record);
            setVisible(true);
          }}
        >
          修改
        </a>
      ],
      search: false,
    }
  ];

  const handleDelete = async () => {
    if (!selectedRowKeys?.length) return;
    openConfirm(`您确定删除${selectedRowKeys.length}条记录吗`, async () => {
      await deleteContacts(selectedRowKeys);
      refAction.current?.reload();
    });
  };


  return (
    <PageContainer>
      <ProTable<API.ContactsDTO>
        actionRef={refAction}
        rowKey="id"
        request={async (params = {}) => {
          return convertPageData(await listContacts(params));
        }}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              setcontact(undefined);
              setVisible(true);
            }}
          >
            <PlusOutlined /> 新建
          </Button>,
          <Button
            type="primary"
            key="primary"
            danger
            onClick={handleDelete}
            disabled={!selectedRowKeys?.length}
          >
            <DeleteOutlined /> 删除
          </Button>,
        ]}
        columns={columns}
        rowSelection={{
          onChange: (rowKeys) => {
            selectRow(rowKeys as number[]);
          },
        }}

      />
      <InputDialog
        detailData={contact}
        onClose={(result:boolean) => {
          setVisible(false);
          result && refAction.current?.reload();
        }}
        visible={visible}
      />
    </PageContainer>
  );
};
